<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>聊天室 - 聊天窗口</title>

    <meta name="keywords" content="聊天室">

    <link rel="shortcut icon" href="favicon.ico"> <link href="${ctxPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctxPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/animate.css" rel="stylesheet">
    <link href="${ctxPath}/static/css/style.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">

    <div class="wrapper wrapper-content  animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">

                <div class="ibox chat-view">

                    <div class="ibox-title">
                        <small class="pull-right text-muted"></small> 聊天窗口
                    </div>


                    <div class="ibox-content">

                        <div class="row">

                            <div class="col-md-9 ">
                                <div class="chat-discussion">




                                </div>

                            </div>
                            <div class="col-md-3">
                                <div class="chat-users">


                                    <div class="users-list">
                                       <!-- <div class="chat-user">
                                            <img class="chat-avatar" src="${ctxPath}/static/img/a4.jpg" alt="">
                                            <div class="chat-user-name">
                                                <a href="#">伤城Simple</a>
                                            </div>
                                        </div>-->



                                    </div>

                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="chat-message-form">

                                    <div class="form-group">

                                        <textarea class="form-control message-input" id="messageInput" name="message" placeholder="输入消息内容，按回车键发送"></textarea>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>

        </div>


    </div>



    <script type="text/template" id="chat-message">
        <div id="chat_message" class="chat-message-right">
            <img class="message-avatar" src="${ctxPath}/static/img/a1.jpg" alt="">
            <div class="message">
                <a class="message-author" href="#"></a>
                <span class="message-date"></span>
                <span class="message-content">
                </span>
            </div>
        </div>
    </script>






    <!-- 全局js -->
    <script src="${ctxPath}/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctxPath}/static/js/bootstrap.min.js?v=3.3.6"></script>



    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
    <!--统计代码，可删除-->

    <!--
    单聊： https://blog.csdn.net/yayicho/article/details/52330627
    -->

    <script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
    <script type="application/javascript">


        function getMessageTemplate(leftOrRight) {

            var messageTemplate =
                ' <div id="chat_message" class="'+leftOrRight+'">\n' +
                '            <img class="message-avatar" src="${ctxPath}/static/img/a1.jpg" alt="">\n' +
                '            <div class="message">\n' +
                '                <a class="message-author" href="#"></a>\n' +
                '                <span class="message-date"></span>\n' +
                '                <span class="message-content">\n' +
                '                </span>\n' +
                '            </div>\n' +
                '</div>';
            return messageTemplate;

        }

        $(document).ready(function(){
            connect();
        });

        var stompClient = null;

        //this line.
        function connect() {

            var socket = new SockJS("${ctxPath}/push");
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/chat', function(response){
                    var returnData = JSON.parse(response.body);
                    console.log('收到消息');
                    console.log(returnData);
                    alert(returnData);

                });
                stompClient.subscribe('/user/topic/message', function(response){
                    var returnData = JSON.parse(response.body);
                    console.log('收到消息2');
                    console.log(returnData);

                });
               /* stompClient.subscribe('/user/admin/message',function(response){
                    var returnData = JSON.parse(response.body);
                    console.log('个人收到消息');
                    console.log(returnData);
                });*/

            });
        }


        //发送消息
        function sendmessage2(message) {
            var obj=null;

            //群聊
            obj = {
                type:2,//1为单聊，2为群聊
                msg:message
            };

            obj = JSON.stringify(obj);
            stompClient.send("/app/test", {}, obj);
        }

        //发送消息
        function sendmessage(message) {
            var obj=null;

            //群聊
            obj = {
                type:2,//1为单聊，2为群聊
                msg:message
            };

            obj = JSON.stringify(obj);
            stompClient.send("/app/chat", {}, obj);
        }

        $(document).keyup(function(event){
            if(event.keyCode ==13){
                var message = $('#messageInput').val();
                if (message == "") {
                    alert('请输入要发送的消息');
                    return;
                }
                sendmessage(message);
                //sendmessage(message);
                $('#messageInput').val("");
            }
        });

    </script>
</body>

</html>
